<template>
	<view>
		<view class="client">
			<view class="client-list" v-for="(item,index) in agentList" :key="index">
				<view class="client-avatar">
					<image :src="item.avatar" mode=""></image>
				</view>
				<view class="client-info">
					<view class="client-detail">
						<text>{{item.name}}</text>
						<text>{{item.mobile}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 加载 -->
		<uni-load-more :status="status" :contentText="contentText" v-if="!isEmpty"></uni-load-more>	
		<!-- 暂无数据 -->
		<view v-if="isEmpty" class="noData">
			<view class="nodata-img">
				<image src="../../static/icon/nodata.png" mode=""></image>
			</view>
			<view class="nodata-content"><text>暂无数据哦～</text></view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue'	
	export default{
		name:'myAgent',
		components:{
			uniLoadMore
		},
		data(){
			return{
				isEmpty:false,
				page:0,
				hasFlag:true,
				status:'loading',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				agentList:[]
			}
		},
		methods:{
			// 获取我的经纪人
			async getMyAgent(){
				if (!this.hasFlag) return // 说明已经没有更多
				this.page = ++this.page				
				let res = await this.$fetch(this.$api.myManagerList,{},'GET')
				console.log(res);
				if(res.total){
					this.isEmpty = false
				}else{
					this.isEmpty = true
				}
				this.agentList = [...this.agentList,...res.rows]
				this.hasFlag = 10*this.page < res.total
				if(!this.hasFlag){
					this.status = 'noMore'
				}				
			}
			
		},
		onShow() {
			this.getMyAgent()
		},
		onReachBottom() {
			if(this.hasFlag){
				this.getMyAgent()
			}else{
				this.status = 'noMore'
			}
		},
		onPullDownRefresh() {
			this.page = 0;
			this.hasFlag = true;
			this.status = 'loading'
			this.agentList = [];
			uni.stopPullDownRefresh()
			this.getMyAgent();
		}		
	}
</script>

<style lang="less">
	page{
		background: #F0F0F0;
	}
	.noData{
		background: #FFFFFF;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		
		.nodata-img{
			width: 100%;
			height: 325.6rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 100rpx;
			
			image{
				width: 300rpx;
				height: 325.6rpx;
			}
		}
		
		.nodata-content{
			width: 100%;
			margin-top: 40.4rpx;
			font-size: 24rpx;
			color: #A6A6A6;
			text-align: center;
		}
	}
	.client{
		width: 100%;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
	}
	.client-list{
		width: 720rpx;
		height: 130rpx;
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		
		.client-avatar{
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url('https://img.bajiaostar.com/FgkVAFlA5etvApeTeLEt2P0s822H');
			
			image{
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}
		}
		
		.client-info{
			width: 600rpx;
			margin-left: 30rpx;
			height: 130rpx;
			display: flex;
			border-bottom: 2rpx solid #F0F0F0;
			
			.client-detail{
				width: 460rpx;
				height: 130rpx;
				display: flex;
				flex-direction: column;
				
				& > text:first-child{
					width: 460rpx;
					font-size: 28rpx;
					color: #4A4A4A;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					margin-top: 20rpx;
				}
				
				& > text:nth-child(2){
					width: 460rpx;
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #9B9B9B;
				}
			}
		}
	}	
</style>
